<template>
  <div class="cinemas">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="film-item" v-for="item in list" :key="item.filmId">
          <img class="img" :src="item.poster" alt="" />
          <p>{{ item.name }}</p>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { PullRefresh, List } from "vant";
// import axios from "axios";
import myAxios from "@/utils/request";

export default {
  name: "cinemas",

  // 局部注册组件
  components: {
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
  },

  data() {
    return {
      list: [], // 存放数据
      total: 1, // 总的条数
      pageNum: 0, // 存放当前页数
      pageSize: 10, // 存放每页显示的条数

      isLoading: false, // 是否处于刷新中
      loading: false, // 是否加载中（加载更多）
    };
  },

  computed: {
    // finished: false, // 是否加载完成（没有更多的数据了）
    finished() {
      return this.list.length >= this.total;
    },
  },

  // mounted() {
  //   this.getData();
  // },

  methods: {
    onLoad() {
      // 当数据加载成功之后，需要将 loading 设置为 false
      console.log(123);

      this.pageNum++;
      this.getData().then(() => {
        // 没有设置 false 时，没问题
        // 设置 false 时，当前请求完毕，会再次触发判断滚动条是否触底，如果触底，load事件也会被触发。
        // 问题时 getData 函数中 list 数据没有弄成追加的方式
        this.loading = false;

        // // 处理是否有更多
        // this.finished = this.list.length >= this.total;
      });
    },

    onRefresh() {
      // console.log(123);
      // 当数据刷新成功之后，需要将 isLoading 设置为 false

      // async 函数返回的是 一个 promise
      // const p = this.getData();
      // console.log(p);

      this.pageNum = 1;
      this.getData().then(() => {
        // 将 isLoading 设置为 false
        this.isLoading = false;
      });
    },

    async getData() {
      try {
        const { data } = await myAxios.get("/maizuo/gateway", {
          headers: {
            "X-Client-Info":
              '{"a":"3000","ch":"1002","v":"5.2.1","e":"1660376834309632782303233"}',
            "X-Host": "mall.film-ticket.film.list",
          },

          params: {
            cityId: "440300",
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            type: 1,
            k: 9962003,
          },
        });

        console.log(data);
        if (data.status === 0) {
          // this.list = data.data.films;
          // 下拉刷新不时追加，上拉加载更多才是追加
          this.list =
            this.pageNum === 1
              ? data.data.films
              : [...this.list, ...data.data.films];

          this.total = data.data.total;
        } else {
          this.$toast(data.msg);
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
